<script setup lang="ts">
import * as echarts from "Echarts";
import { onMounted, ref } from "vue";
const charts = ref(null);
onMounted(() => {
    if (charts.value) {
        const myChart = echarts.init(charts.value);
        const option = {
            title: {
                text: '年度消费金额'
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 300, 260, 400, 410, 500, 652, 666,],
                    type: 'line'
                }
            ]
        }
        myChart.setOption(option);
    }
});
</script>

<template>
    <div class="charts" ref="charts" style="width: 600px; height: 400px"></div>
</template>

<style lang="scss" scoped></style>
